<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" class="flex-row-left">
				<el-input  class="w-200 mr-10" placeholder="输入名称搜索" clearable />
				<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			</el-col>			
			<el-col :span="12" class="flex-row-right">
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Plus /></el-icon>新建</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
			</el-col>
		 </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">		 	
			<el-table-column fixed="left" width="55">
			  <template #default>
				<el-table-column type="selection"/>	
			  </template>
			</el-table-column>
			<el-table-column fixed="left" width="55" label="ID">
			  <template #default>
				<el-table-column prop="id" />
			  </template>
			</el-table-column>
		 	<el-table-column fixed="left" width="120" label="客户编码">
		 	  <template #default>
		 		<el-table-column prop="id"   />
		 	  </template>
		 	</el-table-column>
		 	<el-table-column fixed="left" width="120" label="客户名称">
		 	  <template #default>
		 		<el-table-column prop="id"   />
		 	  </template>
		 	</el-table-column>		 	
		 	<el-table-column prop="id" label="工号" width="120"/>
			<el-table-column prop="id" label="姓名" width="120"/>
			<el-table-column prop="id" label="证件类型" width="120"/>
			<el-table-column prop="id" label="证照号码" width="120"/>
			<el-table-column prop="id" label="国籍(地区)" width="120"/>
			<el-table-column prop="id" label="性别" width="120"/>
			<el-table-column prop="id" label="出生日期" width="120"/>
			<el-table-column prop="id" label="人员状态" width="120"/>
			<el-table-column prop="id" label="任职受雇从业类型" width="120"/>
			<el-table-column prop="id" label="手机号码" width="120"/>
			<el-table-column prop="id" label="任职受雇从业日期" width="120"/>
			<el-table-column prop="id" label="离职日期" width="120"/>
			<el-table-column prop="id" label="是否残疾" width="120"/>
			<el-table-column prop="id" label="是否烈属" width="120"/>
			<el-table-column prop="id" label="是否孤老" width="120"/>
			<el-table-column prop="id" label="残疾证号" width="120"/>
			<el-table-column prop="id" label="烈属证号" width="120"/>
			<el-table-column prop="id" label="是否扣除减除费用" width="120"/>
			<el-table-column prop="id" label="个人投资额" width="120"/>
			<el-table-column prop="id" label="个人投资比例(%)" width="120"/>
			<el-table-column prop="id" label="备注" width="120"/>
			<el-table-column prop="id" label="中文名" width="120"/>
			<el-table-column prop="id" label="涉税事由" width="120"/>
			<el-table-column prop="id" label="出生国家(地区)" width="120"/>
			<el-table-column prop="id" label="首次入境时间" width="120"/>
			<el-table-column prop="id" label="预计离境时间" width="120"/>
			<el-table-column prop="id" label="其他证照类型" width="120"/>
			<el-table-column prop="id" label="其他证照号码" width="120"/>
			<el-table-column prop="id" label="户籍所在地（省）" width="120"/>
			<el-table-column prop="id" label="户籍所在地（市）" width="120"/>
			<el-table-column prop="id" label="户籍所在地（区县）" width="120"/>
			<el-table-column prop="id" label="户籍所在地（详细地址）" width="120"/>
			<el-table-column prop="id" label="经常居住地址（省）" width="120"/>
			<el-table-column prop="id" label="经常居住地址（市）" width="120"/>
			<el-table-column prop="id" label="经常居住地址（区县）" width="120"/>
			<el-table-column prop="id" label="经常居住地址（详细地址）" width="120"/>
			<el-table-column prop="id" label="联系地址（省）" width="120"/>
			<el-table-column prop="id" label="联系地址（市）" width="120"/>
			<el-table-column prop="id" label="联系地址（区县）" width="120"/>
			<el-table-column prop="id" label="联系地址（详细地址）" width="120"/>
			<el-table-column prop="id" label="电子邮箱" width="120"/>
			<el-table-column prop="id" label="学历" width="120"/>
			<el-table-column prop="id" label="开户银行" width="120"/>
			<el-table-column prop="id" label="银行账号" width="120"/>
			<el-table-column prop="id" label="职务" width="120"/>
		 	<el-table-column fixed="right" label="操作" width="240">
		 	  <template #default>
				<el-button type="warning" plain><el-icon class="mr-5"><EditPen /></el-icon>编辑</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>删除</el-button>
		 	  </template>
		 	</el-table-column>
		 </el-table>
		 <div class="flex-row-right mt-20">
			 <el-pagination
			   :page-sizes="[100, 200, 300, 400]"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="400"
			 />
		 </div>
		 <cateForm 
		 :dialogVisible="dialogVisible" 
		 :width="40" 
		 @dialogVisibleByValue="dialogVisibleByValue"  
		 ref="cateForm"
		 />
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {	
				dialogVisible:false,
				value5:false,
				loading:true,
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id: 1,
				      },
				      {
				    	id: 2,
				      },
				      {
				    	id: 3,
				      },
				      {
				    	id: 4,
				      },
				      {
				    	id: 5,
				      },
				      {
				      	id: 6,
				      },
				      {
				      	id: 7,
				      },
				      {
				      	id: 8,
				      },
				      {
				      	id: 9,
				      },
				      {
				      	id: 10,
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
	.example-showcase .el-loading-mask {
	  z-index: 9;
	}
</style>
